<!-- 排行信息查询 -->
<template>
  <div>
    <el-card>
      <div class="topInquire">
        <div>
          <span>服务器 </span>
          <el-cascader
            v-model="serverValue"
            :options="serverOptions"
            @change="handleChange"
            clearable
            size="small"
            >
          </el-cascader>
        </div>

        <div>
          <span>排行榜类型 </span>
          <el-select v-model.number="leaderboardType" size="small" style="width:200px" clearable>
            <!--客户端那边反了，先这样临时处理-->
            <el-option :value="2" label="等级排行" />
            <el-option :value="1" label="关卡排行" />
            <el-option :value="3" label="副本排行" />
            <el-option :value="4" label="充值排行" />
          </el-select>
        </div>

        <div>
          <span>玩家ID </span>
          <el-input v-model.trim="playerId" style="width:200px" size="small" clearable placeholder="请输入" />
        </div>

        <el-button size="small" icon="el-icon-search" type="primary" @click="searchBtn">搜索</el-button>
      
        <el-button icon="el-icon-upload2" type="success" 
            size="small" @click="handleExport">导出Excel</el-button>
  
      </div>

      <div>
        <el-table
          ref="table"
          border
          :data="rankData"
          :header-cell-style="{background:'#f5f7fa'}"
          :height="tableHeight"
          style="width: 100%;"
        >
          <el-table-column prop="rank" label="排名"  />
          <el-table-column prop="playerId" label="玩家ID"  />
          <el-table-column prop="nick" label="玩家名称"  />
          <el-table-column prop="score" label="排行分数"  />
          <el-table-column prop="subScore" label="次级分数"  />
          <el-table-column prop="time" label="更新时间">
            <template slot-scope="scope">{{ scope.row.time|formatTime }}</template>
          </el-table-column>
          <el-table-column label="详情">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleViewDetail(scope.row.playerId)"
              >【查询】</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog
      title="玩家基本信息"
      :visible.sync="dialogVisible"
      width="70%"
      :modal-append-to-body="false"
      @close="dialogVisible = false"
    >
          <div class="role-content">
            <el-table
              border
              :data="detailsData"
              :header-cell-style="{background:'#f5f7fa'}"
              :cell-style="{'text-align':'center'}"
              height="200"
            >
              <el-table-column prop="id" label="玩家ID" min-width="200" />
              <el-table-column prop="nick" label="角色名" min-width="120" />
              <el-table-column prop="level" label="角色等级" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleLevel(row.id)">{{ row.level }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="vipLevel" label="VIP等级" min-width="120" />
              <el-table-column prop="recharge" label="充值金额" min-width="120" />
              <el-table-column prop="bornTime" label="创号时间" min-width="180" >
               <template slot-scope="scope">{{ scope.row.bornTime|formatTime }}</template>
              </el-table-column>
              <el-table-column prop="mission" label="通关关卡" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleMission(row.id)">{{ row.mission }}</el-link>
                </template>       
              </el-table-column>
              <el-table-column prop="gold" label="金币" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleGold(row.id)">{{ row.gold }}</el-link>
                </template>    
              </el-table-column>
              <el-table-column prop="diamond" label="钻石" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleDiamond(row.id)">{{ row.diamond }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="heroNum" label="英雄数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleHeroNum(row.id)">{{ row.heroNum }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="muscle" label="体力" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleMuscle(row.id)">{{ row.muscle }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="point" label="积分" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handlePoint(row.id)">{{ row.point }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="gooseFeather" label="鹅毛" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleGooseFeather(row.id)">{{ row.gooseFeather }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="weaponSummon" label="武器召唤次数" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleWeaponSummon(row.id)">{{ row.weaponSummon }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="treasureSummon" label="宝藏召唤次数" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleTreasureSummon(row.id)">{{ row.treasureSummon }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="weaponNum" label="武器数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleWeaponNum(row.id)">{{ row.weaponNum }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="treasureNum" label="宝藏数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleTreasureNum(row.id)">{{ row.treasureNum }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <div>
     <!-- 等级弹窗 -->
     <LevelDialog :visible.sync="levelChangeDialog" :levelData="levelData" :total="childTotal" @child-inquire="handleLevel(playerId,$event)" />
     <!-- 关卡弹窗 -->
     <MissionDialog :visible.sync="missionChangeDialog" :missionData="missionData" :total="childTotal" @child-inquire="handleMission(playerId,$event)" />
     <!-- 金币弹窗 -->
     <GoldDialog :visible.sync="goldChangeDialog" :goldData="goldData" :total="childTotal" @child-inquire="handleGold(playerId,$event)" />
     <!-- 钻石弹窗 -->
     <DiamondDialog :visible.sync="diamondChangeDialog" :diamondData="diamondData" :total="childTotal" @child-inquire="handleDiamond(playerId,$event)" />
     <!-- 体力弹窗 -->
     <MuscleDialog :visible.sync="muscleChangeDialog" :muscleData="muscleData" :total="childTotal" @child-inquire="handleMuscle(playerId,$event)" />
     <!-- 积分弹窗 -->
     <PointDialog :visible.sync="pointChangeDialog" :pointData="pointData" :total="childTotal" @child-inquire="handlePoint(playerId,$event)" />
     <!-- 鹅毛弹窗 -->
     <FeatherDialog :visible.sync="featherChangeDialog" :featherData="featherData" :total="childTotal" @child-inquire="handleGooseFeather(playerId,$event)" />
     <!-- 英雄数量弹窗 -->
     <HeroNumDialog :visible.sync="heroNumChangeDialog" :heroNumData="heroNumData" :total="childTotal" @child-inquire="handleHeroNum(playerId,$event)" />
     <!-- 宝藏召唤数量弹窗 -->
     <TreasureSummonDialog :visible.sync="treasureSummonChangeDialog" :treasureSummonData="treasureSummonData" :total="childTotal" @child-inquire="handleTreasureSummon(playerId,$event)" />
     <!-- 宝藏数量弹窗 -->
     <TreasureNumDialog :visible.sync="treasureNumChangeDialog" :treasureNumData="treasureNumData" :total="childTotal" @child-inquire="handleTreasureNum(playerId,$event)" />
     <!-- 武器召唤弹窗 -->
     <WeaponSummoDialog :visible.sync="weaponSummonChangeDialog" :weaponSummonData="weaponSummonData" :total="childTotal" @child-inquire="handleWeaponSummon(playerId,$event)" />
     <!-- 武器弹窗 -->
     <WeaponNumDialog :visible.sync="weaponNumChangeDialog" :weaponNumData="weaponNumData" :total="childTotal" @child-inquire="handleWeaponNum(playerId,$event)" />
   </div>

  </div>
</template>

<script>
import { export_json_to_excel } from '@/widget/Export2Excel'
import { rankInfo,playerDetail,playerDataChange } from '@/api/playerManage'
import { serverGroupOpt } from '@/api/aboutOptions'

import LevelDialog from './components/LevelDialog'
import MissionDialog from './components/MissionDialog'
import GoldDialog from './components/GoldDialog'
import DiamondDialog from './components/DiamondDialog'
import MuscleDialog from './components/MuscleDialog'
import PointDialog from './components/PointDialog'
import FeatherDialog from './components/FeatherDialog'
import HeroNumDialog from './components/HeroNumDialog'
import TreasureSummonDialog from './components/TreasureSummonDialog'
import TreasureNumDialog from './components/TreasureNumDialog'
import WeaponSummoDialog from './components/WeaponSummoDialog'
import WeaponNumDialog from './components/WeaponNumDialog'

export default {
  components: {
    LevelDialog,MissionDialog,GoldDialog,DiamondDialog,MuscleDialog,PointDialog,
    FeatherDialog,HeroNumDialog,TreasureSummonDialog,TreasureNumDialog,
    WeaponSummoDialog,WeaponNumDialog
  },
  data() {
    return {
      rankData: [],
      leaderboardType: 1,
      currentPage: 1, // 当前页
      pageSize: 200, // 每页显示条数
      tableHeight: 0, // 表格高度
      playerId:'',
      total:0,
      serverValue:'',
      serverOptions:[],
      dialogVisible: false,
      detailsData:[],

      levelChangeDialog: false,
      missionChangeDialog: false,
      goldChangeDialog: false,
      diamondChangeDialog: false,
      muscleChangeDialog: false,
      pointChangeDialog: false,
      featherChangeDialog: false,
      heroNumChangeDialog: false,
      treasureSummonChangeDialog: false,
      treasureNumChangeDialog: false,
      weaponSummonChangeDialog: false,
      weaponNumChangeDialog: false,

      childTotal:0,
      levelData:[],
      missionData:[],
      goldData:[],
      diamondData:[],
      muscleData:[],
      pointData:[],
      featherData:[],
      heroNumData:[],
      treasureSummonData:[],
      treasureNumData:[],
      weaponSummonData:[],
      weaponNumData:[]
    }
  },

  created() {
    this.getRank()
    this.getServer()
  },

  mounted() {
    this.$nextTick(() => {
      this.getTableHeight()
    })
    window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.getTableHeight)
  },

  methods: {
    // 获取数据
    async getRank() {
      const res = await rankInfo({
        page: this.currentPage,
        limit: this.pageSize
      })
      this.total = res.data.data.count
      this.rankData = res.data.data.data
    },

    // 获取服务器
    async getServer() {
      const res = await serverGroupOpt()
      this.serverOptions = res.data.data.groups
    },
    
    // 操作选中的服务器
    handleChange(value){
      let newValue=Number(value[value.length - 1]);
      this.serverValue = newValue
    },

    // 搜索按钮
    async searchBtn() {
      try {
        const query = {}
        if (this.serverValue) {
          query.serverUid = this.serverValue
        }
        if (this.leaderboardType) {
          query.rankType = this.leaderboardType
        }
        if (this.playerId) {
          query.playerId = this.playerId
        }
        const result = await rankInfo(query)
        this.rankData = result.data.data.data
      } catch (error) {
        console.error(error)
        this.$message.error('发生错误，请稍后重试')
      }
    },

    // 查看玩家信息详情
   async handleViewDetail(id) {
      const resInfo = await playerDetail({ playerId: id })
      this.detailsData = resInfo.data.data.data
      this.dialogVisible = true
    },


     // 等级变化详情
     async handleLevel(id, childParams = 1) {
      this.playerId = id
      let params = { playerId: this.playerId, module: 'level' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.levelData = res.data.data.data
      this.levelChangeDialog = true
    },

    // 关卡变化详情
    async handleMission(id,childParams=1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'mission' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.missionData = res.data.data.data
      this.missionChangeDialog = true
    },

    // 金币变化详情
    async handleGold(id,childParams=1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'gold' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.goldData = res.data.data.data
      this.goldChangeDialog = true
    },

    // 钻石变化详情
    async handleDiamond(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'diamond' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.diamondData = res.data.data.data
      this.diamondChangeDialog = true
    },

    // 体力变化详情
    async handleMuscle(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'muscle' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.muscleData = res.data.data.data
      this.muscleChangeDialog = true
    },

    // 积分变化详情
    async handlePoint(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'point' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.pointData = res.data.data.data
      this.pointChangeDialog = true
    },

    // 羽毛变化详情
    async handleGooseFeather(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'feather' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.featherData = res.data.data.data
      this.featherChangeDialog = true
    },

    // 英雄数量变化详情
    async handleHeroNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'heroNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.heroNumData = res.data.data.data
      this.heroNumChangeDialog = true
    },

    // 宝藏召唤数量变化详情
    async handleTreasureSummon(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'treasureSummon' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.treasureSummonData = res.data.data.data
      this.treasureSummonChangeDialog = true
    },

    // 宝藏数量变化详情
    async handleTreasureNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'treasureNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.treasureNumData = res.data.data.data
      this.treasureNumChangeDialog = true
    },

    // 武器召唤数量变化详情
    async handleWeaponSummon(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'weaponSummon' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.weaponSummonData = res.data.data.data
      this.weaponSummonChangeDialog = true
    },

    // 武器数量变化详情
    async handleWeaponNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'weaponNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.weaponNumData = res.data.data.data
      this.weaponNumChangeDialog = true
    },

    // 表格自适应高度
    getTableHeight() {
      if (this.$refs.table && this.$refs.table.$el) {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140
      } else {
        this.tableHeight = 300
      }
    },

     // 导出
     async handleExport() {
        try {
          const res = await rankInfo({
            limit: this.total
          })
  
          // 处理导出数据
          const exportData = res.data.data.data.map(i => {
            // 更新时间
            const time = this.$options.filters.formatTime(i.time)
  
            return { ...i,time }
          })
  
          const newData = exportData.map(item => {
            const arr = []
            const obj = {
              rank: '排名',
              playerId: '玩家ID',
              nick: '玩家名称',
              score: '排行分数',
              subScore:'次级分数',
              time: '更新时间'
            }
            for (const key in obj) {
              arr.push(item[key])
            }
            return arr
          })
  
          const tHeader = [
            '排名', '玩家ID', '玩家名称', '排行分数','次级分数','更新时间']
  
          export_json_to_excel({
            header: tHeader,
            data: newData,
            filename: `排行信息查询表${this.$moment(new Date()).format('YYYYMMDDHHmm')}`,
            autoWidth: true,
            bookType: 'xlsx'
          })
        } catch (error) {
          this.$message.error(error)
        }
      },

  }
}
</script>
<style lang="scss" scoped>

.topInquire{
  font-weight: bold;
  font-size: 14px;
  color: #6a7488;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

</style>
